// src\containers\Count\index.jsx
// Count组件的容器组件

// 引入Count组件的UI组件
// import CountUI from '../../components/Count'
// 引用connect用于连接UI组件与redux
import { connect } from 'react-redux'
// 引入当前组件的action
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'
import React, { Component } from 'react'

// Count组件的UI组件
class Count extends Component {
    // Count私有的state
    state = {}
    // componentDidMount() {//store中数据发生改变，但是视图不一定会改变
    //     store.subscribe(() => {
    //         this.setState({})//虚晃一枪“改变state”,使得render刷新
    //     });
    // }
    // 加法
    increment = () => {
        const { value } = this.selectNumber;
        // store.dispatch({ type: 'increment', data: value * 1 })
        // store.dispatch(createIncrementAction(value*1));
        this.props.jia(value * 1);
    }
    // 减法
    decrement = () => {
        const { value } = this.selectNumber;
        // store.dispatch({ type: 'decrement', data: value * 1 })
        // store.dispatch(createDecrementAction(value*1));
        this.props.jian(value * 1);
    }
    // 当前求和为奇数再加
    incrementIfOdd = () => {
        const { value } = this.selectNumber;
        const count = this.props.count;
        if (count % 2 !== 0) {
            this.props.jia(value * 1);
        }
    }
    // 异步加
    incrementAsync = () => {
        const { value } = this.selectNumber;
        // setTimeout(()=>{
        // store.dispatch(createIncrementAsyncAction(value*1,500));
        // },500)
        this.props.jiaAsync(value * 1, 2000);

    }
    render() {
        // console.log("UI组件",this.props);
        return (
            <div>
                <h4>Count组件</h4>
                <h1>当前求和：{this.props.count}</h1>
                <h1>目前有多少人：{this.props.personList.length}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;

            </div>
        )
    }
}

// mapStateToProps会默认回调当前组件state的值
// function mapStateToProps(state) {
//     return { count: state }
// }
//mapDispatchToProps回调dispatch
// function mapDispatchToProps(dispatch) {
//     return {
//         //加法操作
//         jia: number => dispatch(createIncrementAction(number)),
//         //减法操作
//         jian: number => dispatch(createDecrementAction(number)),
//         //异步加法
//         jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time))

//     }
// }
// 使用connect()创建并暴露一个Count容器组件
// connect()中接收两个函数mapStateToProps,mapDispatchToProps，两个函数的返回类型必须为对象
export default connect(
    state => ({ count: state.he,
        personList:state.rens}), {
    //加法操作
    jia: createIncrementAction,
    //减法操作
    jian: createDecrementAction,
    //异步加法
    jiaAsync: createIncrementAsyncAction

})(Count);
